<template>
  <div class="did-h">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <div class="dia">
        <el-dialog title="创建管理员界面" :visible.sync="isCreateDialogVisible" @close="closeCreateDialog">
          <el-form label-position="right" label-width="100px" :model="createForm">
            <el-form-item label="士兵号">
              <el-input v-model="createForm.number"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="createForm.name"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="createForm.department"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="createSubordinate" type="primary">确认</el-button>
          </span>
        </el-dialog>
      </div>
    </el-tabs>
    <!-- 卡片-->
    <el-card style="margin-top: 0px">
      <div class="but">
        <el-button size="medium" type="primary" @click="showCreateDialog">创建管理员</el-button>
      </div>
      <!--搜索与添加区域-->
      <el-row :gutter="10">
        <el-col :span="7">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-col>
        <el-col :span="4"></el-col>
      </el-row>
      <!--用户列表区域-->
      <el-table :data="tableData" >
        <el-table-column label="DID" prop="did" align="center"></el-table-column>
        <el-table-column label="士兵号" prop="number" align="center"></el-table-column>
        <el-table-column label="用户名" prop="name" align="center"></el-table-column>
        <el-table-column label="公钥" prop="publicKey" min-width="400" align="center"></el-table-column>
        <el-table-column label="部门" prop="department" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
        <el-table-column label="帐号状态" prop="userStatus" align="center"></el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 2, 5, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </el-card>
  </div>
</template>

<script>
import NoData from '../../../src/components/noData.vue';

export default {
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      total: 0,
      isCreateDialogVisible: false,
      createForm: {
        number: '',
        name: '',
        department: '',
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      data: null,
    };
  },
  mounted() {
    this.showcreatad(1);
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async createSubordinate() {
      this.data = '';
      let params = this.createForm;
      console.log(params);
      let res = await this.$http.post(this.$api.userIdentity.createSubordinate, params);
      console.info(res);
      this.tableData = res;
      if (res.code == 200) {
        this.tableData.name = res.name;
        console.info(this.tableData);
      }
      this.closeCreateDialog();
    },
    async showcreatad(pageNum) {
      let formData = new FormData();
      formData.append('pageNum', pageNum);
      formData.append('pageSize', this.pageSize);
      try {
        let res = await this.$http.post(this.$api.userIdentity.showcreatad, formData);
        if (res.status === 200) {
          this.tableData = res.data.records; // 请求成功后将res.data赋值给tableData
          this.total = res.data.total;
          console.log(res.data);
        }
      } catch (error) {
        console.error(error);
      }
    },
    goToipfsDownload() {
      this.$router.push('/ipfsDownload');
    },
    showCreateDialog() {
      this.isCreateDialogVisible = true;
    },
    closeCreateDialog() {
      this.isCreateDialogVisible = false;
    },
    async handleSizeChange(newSize) {
      this.pageSize = newSize;
      await this.showcreatad(this.currentPage);
    },
    async handleCurrentChange(newPage) {
      this.currentPage = newPage;
      await this.showcreatad(this.currentPage);
    },
  },
};
</script>

<style lang="less" scoped>
.did-h {
  border-left: 1px solid #cccccc2f;
  border-right: 1px solid #cccccc4e;
}

.black-h {
  height: 90%;
}

.black-height {
  height: calc(50% - 90px);
}

.text-c {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}

.dia {
  margin-top: 10px;
}
</style>
